<template>
	<view class="pinglun">
		<view class="uni-padding-wrap">
			<view class='pinglun_title' v-if="showTitle"><text>热门评论区</text></view>
			<!-- 评论区 start -->
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="item in comments" :key="item.id">
					<view class="uni-comment-face"><image :src="item.avatar" mode="widthFix"></image></view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{item.name || '游客'}}</text>
							<view @tap="setCommentLike(item.id)"><text class="right">{{item.likeTimes}}</text><image :src="item.liked?'../../static/img/dianzan1.png':'../../static/img/dianzan.png'" mode="aspectFill"></image></view>
						</view>
						<view class="uni-comment-date">
							<text>{{item.hospital}}</text>
						</view>
						<view class="uni-comment-content">{{item.value}}</view>
						<view class="reply">
							<text>{{item.date}}</text><text class="back" @tap='setFocus1(item.id)'>回复</text>
						</view>
						<view class='reply_content' v-if="item.from">
							<view class='myview'><text>{{item.from.name}}<text class='reply_time'>{{item.from.date}}</text></text></view>
							<view><text>回复{{item.name || '游客'}}：{{item.from.value}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="nomore" v-if="!hasMore"><text>没有更多数据了~</text></view>
			<!-- 评论区 end -->
		</view>
		<!-- <view class="btm">
			<view class="input"></view>
			<view class='item' @tap="ScrollTo">
				<image src="../../static/img/pinglun.png" mode="widthFix"></image>
				<text>{{comments.length}}</text>
			</view>
			<view class='item' @tap='setContentLike'>
				<image class='item-zan' :src="content.liked?'../../static/img/dianzan1.png':'../../static/img/dianzan.png'" mode="widthFix"></image>
				<text>{{content.likes}}</text> 
			</view>
			<view class='item' @tap='setContentFavorite'>
				<image :src="content.favorited?'../../static/img/heart2.png':'../../static/img/heart.png'" mode="widthFix"></image>
				<text>{{content.favorites}}</text>
			</view>
		</view>
		<view :class="[showSend ? 'active' : '', 'btm2']">
			<input type="text" :focus="focus" @focus="this.showSend=true" v-model="calue"  @blur="setBlur"/>
			<text @tap="send" v-if="showSend">发送</text>
		</view> -->
	</view>
</template>

<script>
	import {
		commentcontent,
		// commentContentLike,
		// commentContentFavorite,
		// setCommentContent,
		// commentLike
	} from '@/utils/api'
	export default {
		name: 'Comments',
		props: {
			ids: {
				type: String
			},
			title: {
				type: Boolean
			},
			getScrollTop: {
				type: Number
			},
			contents:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				page:1,
				id:this.ids,
				content:this.contents,
				focus:false,
				showSend:false,
				comments:[],//评论内容
				calue:'' ,//评论输入框内容
				from:'',
				showTitle:true,
				hasMore:true
			};
		},
		methods:{
			initialComments(){
				this.page=1
				this.comments=[]
				this.getCommentContent()
			},
			//获取详情评论
			async getCommentContent(){
				if(!this.hasMore)return;
				let data = await commentcontent(this.id,{
					page:this.page,
					limit:10 
				})
				if(data.status == 0){
					this.page = this.page+1
					this.comments = [...this.comments,...data.data.docs]
					if(!data.data.docs.length){
						this.hasMore = false
					}
				}
			},
			//点赞内容
			async setContentLike(){
				// let data = await commentContentLike(this.id)
				// if(data.status == 0){
				// 	this.content.liked = data.data.done
				// 	this.content.likes = data.data.likes
				// }
			},
			//点赞评论
			async setCommentLike(id){ 
				// let data = await commentLike(id)
				// if(data.status == 0){
				// 	this.comments.map(item=>{
				// 		if(item.id == id){
				// 			item.liked = data.data.done
				// 			item.likeTimes = data.data.likeTimes
				// 		}
				// 	})
				// }
			},
			//收藏内容
			async setContentFavorite(){
				// let data = await commentContentFavorite(this.id)
				// if(data.status == 0){
				// 	this.content.favorited = data.data.done
				// 	this.content.favorites = data.data.favorites
				// }
			},
			//发表评论
			async send(){
				// if(!this.calue)return;
				// let option = {value:this.calue}
				// if(this.from){
				// 	option.from = this.from
				// }
				// let data = await setCommentContent(this.id,option)
				// if(data.status == 0){
				// 	this.calue = ''
				// 	// this.content.comments += 1
				// 	this.focus = false
				// 	this.initialComments()
				// }
			},
			setFocus1(v){
				// this.from = v
				// this.focus = true
			},
			setBlur(){
				// if(!this.calue){
				// 	this.from = ''  //清空回复人
				// 	this.focus=false
				// 	this.calue = ''
				// } 
				// this.showSend = false
			},
			ScrollTo(){
				// uni.pageScrollTo({
				// 	duration:400,
				// 	scrollTop:this.plTop
				// })
			},
		}, 
		mounted(){ 
			// uni.$on('reachBottom', this.getCommentContent)
			// setTimeout(()=>{
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select(".pinglun_title").boundingClientRect((res)=>{
			// 		if(res && res.top){
			// 			this.plTop = res.top
			// 		}
			// 	}).exec()
			// },1000)
		},
		beforeDestroy(){
			// uni.$off('reachBottom', this.getCommentContent)
		},

		watch:{
			ids(v){
				this.id = v
				this.initialComments()
			},
			contents(v){
				this.content = v
			},
			title(v){
				this.showTitle = v
			}
		}
	}
</script>

<style lang="scss">
	.pinglun{
		border-top: 1px solid #F4F4F4;
		.pinglun_title{
			margin:40upx 0 10upx;
			text{
				color:#333;
				line-height: 1;
				margin:0;padding:0;
				border-left: 5upx solid #333;
				padding-left:40upx;
			}
		}
		.uni-comment-top{
			margin-top: -4upx;
			display:flex;
			justify-content:space-between;
			text{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				margin-bottom: 10upx;
			}
			image{
				width: 29upx;
				height: 26upx;
				margin-left: 4upx;
				margin-top: 4upx;
			}
		} 
		.uni-comment-date{
			position:relative;
			top:-12upx;
			text{
				font-size:20upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
			}
		} 
		.uni-comment-content{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.reply{
			font-size:20upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			margin-top:10upx;
			.back{
				color: #AD85FC;
				margin-left: 36upx;
			}
		}
		.reply_content{
			background:rgba(244,244,244,1);
			border-radius:10upx;
			padding: 10upx 18upx;
			text{
				font-size:20upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height: 1;
			}
			.myview{
				margin-bottom:-10upx;
			}
			.reply_time{
				font-size:20upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				margin-left: 30upx;
			}
		}
		.btm{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left:30upx;
			padding-right:30upx;
			position:fixed;
			width: 690upx;
			bottom:0;
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			background:#fff;
			border-top:1px solid rgba(179,138,221,0.24);
			height: 100upx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-size:28upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.input{
				width:267upx;
				height:44upx;
				background:rgba(244,244,244,1);
				border-radius:7upx;
				padding-left: 14upx;
			}
			.item-zan{
				margin-top: -8upx;
			}
			image{
				width: 40upx;
				margin-right: 10upx;
			}
		}
		.btm2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left:30upx;
			padding-right:30upx;
			position:fixed;
			bottom:0;
			width: 290upx;
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			background:#fff;
			border-top:1px solid rgba(179,138,221,0.24);
			height: 100upx;
			input{
				width: 532upx;
				height:60upx;
				background:rgba(244,244,244,1);
				border-radius:7upx;
				padding-left: 14upx;
			}
			text{
				width: 133upx;
				line-height: 60upx;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				background: #B998FA;
				border-radius: 10upx;
				text-align: center;
			}
		}
		.btm2.active{
			width: 690upx;
		}
		.nomore{
			text-align: center;
			text{
				line-height: 120upx;
				color: #333;
			}
		}
	}
</style>
